let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let totalBox = document.querySelector('.total');
let selectBox = document.querySelector('select');

let data = list.length;
let selvalue = selectBox.value;
let nowpage = 1;
let allpage = Math.ceil(data/selvalue);
xuan();
btn();

//渲染
function xuan(){
    selvalue = selectBox.value;
    allpage = Math.ceil(data/selvalue)
    nowpage = Number(totalBox.innerHTML.substring(0,1));
    totalBox.innerHTML = `${nowpage} / ${allpage}`;
    ul.innerHTML = "";
    for(let i = (nowpage-1)* selvalue;
    i <= nowpage * selvalue - 1 && i < list.length;
    i++){
        ul.innerHTML += `<li>
        <img src="${list[i].pic}" alt=""/>
        <p>${list[i].name}</p>
        <p>城市: ${list[i].city}</p>
        <p>地址: ${list[i].address}</p>
        <p>价格: ${list[i].price}</p>
        <p>演出时间: ${list[i].showTime}</p>
      </li>`;
    }
}
selectBox.addEventListener("change",()=>{
    nowpage = 1;
    totalBox.innerHTML = `${nowpage} / ${allpage}`;
    xuan();
    btn();
})

// 上一张
prevBtn.addEventListener('click',()=>{
    nowpage = Number(totalBox.innerHTML.substring(0, 1));
    if (nowpage != 1) {
      nowpage--;
      allpage = Math.ceil(data / selvalue);
      totalBox.innerHTML = `${nowpage} / ${allpage}`;
    }
    xuan();
    btn();
});

// 下一张
nextBtn.addEventListener('click',()=>{
        nowpage = Number(totalBox.innerHTML.substring(0, 1));
        if (nowpage != allpage) {
          nowpage++;
          totalBox.innerHTML = `${nowpage} / ${allpage}`;
        }
        xuan();
        btn();
});

//按钮失效
function btn(){
  pageNum = Number(totalBox.innerHTML.substring(0, 1));
        allpage = Math.ceil(data / selvalue);
        if (nowpage === 1) {
          prevBtn.classList.add("disable");
        } else {
          prevBtn.classList.remove("disable");
        }
        if (nowpage === allpage) {
          nextBtn.classList.add("disable");
        } else {
          nextBtn.classList.remove("disable");
        }
}
